<template>
  <view class="bg-white h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <view class="px-6 pt-12 pb-4 flex items-center justify-between border-b border-gray-100">
      <view class="flex items-center">
        <view class="text-blue-500 mr-3" @click="goBack">
          <text class="fas fa-chevron-left"></text>
        </view>
        <view class="text-xl font-bold">
          {{ playlistInfo.name }}
        </view>
      </view>
      <view class="flex items-center space-x-4">
        <view class="text-gray-600 hover:text-gray-800" @click="sharePlaylist" id="shareButton">
          <text class="fas fa-share-alt text-xl"></text>
        </view>
      </view>
    </view>

    <!-- 播放列表信息 -->
    <view class="px-6 py-4 text-white" :style="{ background: playlistInfo.background }">
      <view class="flex items-center justify-between">
        <view>
          <view class="text-2xl font-bold mb-2">{{ playlistInfo.name }}</view>
          <view class="text-sm opacity-90 mb-1" v-if="playlistInfo.description">{{ playlistInfo.description }}</view>
          <view class="text-sm opacity-90">{{ playlistInfo.patterns.length }}个精选图案</view>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="px-6 py-4 bg-gray-50 border-b border-gray-100">
      <view class="flex space-x-3">
        <view 
          class="flex-1 bg-blue-500 text-white py-3 px-4 rounded-xl font-medium play-button flex items-center justify-center"
          @click="playAllPatterns"
        >
          <text class="fas fa-play mr-2"></text>
          <text>立即播放全部</text>
        </view>
        <view 
          class="bg-white border border-gray-200 text-gray-700 py-3 px-4 rounded-xl"
          @click="addAllToPlaylist"
        >
          <text class="fas fa-plus"></text>
        </view>
      </view>
    </view>

    <!-- 图案列表 -->
    <scroll-view class="flex-1 px-6 py-4" scroll-y="true">
      <view class="space-y-3">
        <view 
          v-for="pattern in playlistInfo.patterns" 
          :key="pattern.id"
          class="bg-white rounded-xl p-4 flex items-center border border-gray-100 pattern-card"
        >
          <view class="w-16 h-16 bg-gray-100 rounded-lg flex items-center justify-center mr-4">
            <image 
              :src="pattern.image" 
              :alt="pattern.name" 
              class="w-full h-full object-cover rounded-lg"
              mode="aspectFill"
            />
          </view>
          <view class="flex-1">
            <view class="font-medium text-gray-900">{{ pattern.name }}</view>
            <view class="text-sm text-gray-500">{{ pattern.duration }}</view>
          </view>
          <view class="flex items-center space-x-2">
            <view 
              class="w-10 h-10 bg-blue-500 text-white rounded-full flex items-center justify-center hover:bg-blue-600 transition-colors"
              @click="playPattern(pattern)"
            >
              <text class="fas fa-play text-sm"></text>
            </view>
            <view 
              class="w-10 h-10 bg-gray-100 text-gray-600 rounded-full flex items-center justify-center hover:bg-gray-200 transition-colors"
              @click="addToPlaylist(pattern)"
            >
              <text class="fas fa-plus text-sm"></text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部导航栏 -->
    <view class="h-20 border-t border-gray-200 flex items-center justify-around px-6">
      <view class="flex flex-col items-center text-gray-400 hover:text-blue-500 transition-colors" @click="goHome">
        <text class="fas fa-home text-xl"></text>
        <text class="text-xs mt-1">设备</text>
      </view>
      <view class="flex flex-col items-center text-blue-500" @click="goExplore">
        <text class="fas fa-compass text-xl"></text>
        <text class="text-xs mt-1">发现</text>
      </view>
      <view class="flex flex-col items-center text-gray-400 hover:text-blue-500 transition-colors" @click="goProfile">
        <text class="fas fa-user text-xl"></text>
        <text class="text-xs mt-1">我的</text>
      </view>
    </view>

    <!-- Toast提示 -->
    <view 
      v-if="showToast"
      class="fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg z-50 toast-animation"
    >
      {{ toastMessage }}
    </view>
    
    <!-- 设备选择弹窗 -->
    <view v-if="showDeviceSelector" class="modal-overlay">
      <view class="modal-content">
        <!-- 弹窗标题 -->
        <view class="modal-header">
          <text class="modal-title">选择设备</text>
          <text class="modal-close" @click="closeDeviceSelector">×</text>
        </view>
        
        <!-- 全选选项 -->
        <view class="select-all-row">
          <checkbox-group @change="toggleSelectAll">
            <label class="checkbox-label">
              <checkbox :checked="isAllSelected" color="#4080FF" />
              <text class="checkbox-text">全选</text>
            </label>
          </checkbox-group>
          <text class="device-count">共{{ devices.length }}台设备</text>
        </view>
        
        <!-- 设备列表项容器 -->
        <view class="device-list-container">
          <checkbox-group @change="updateSelectedDevices">
            <view v-for="device in devices" :key="device._id" class="device-item">
              <label class="checkbox-label">
                <checkbox :value="device._id" :checked="selectedDeviceIds.includes(device._id)" color="#4080FF" />
                <view class="device-info">
                  <text class="device-name">{{ device.device_name }}</text>
                  <view v-if="device.offline" class="device-status">
                    <text class="device-offline">离线</text>
                  </view>
                </view>
              </label>
            </view>
          </checkbox-group>
          
          <!-- 无设备提示 -->
          <view v-if="devices.length === 0" class="no-device">
            <text>暂无设备，请先添加设备</text>
          </view>
        </view>
        
        <!-- 底部按钮 -->
        <view class="modal-footer">
          <button 
            class="confirm-btn" 
            :class="{'btn-disabled': selectedDeviceIds.length === 0}"
            @click="confirmDeviceSelection"
            :disabled="selectedDeviceIds.length === 0"
          >
            确认
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {featuredPlaylistApi, playlistApi, deviceApi } from '@/api/index.js'
export default {
  name: 'PlaylistDetail',
  data() {
    return {
      // Toast提示
      showToast: false,
      toastMessage: '',
      toastTimeout: null,
      
      // 播放列表信息
      playlistInfo: {
        id: '',
        name: '热门播放列表',
        description: '',
        background: 'linear-gradient(135deg, #8b5cf6, #ec4899)',
        patterns: []
      },
      
      // 加载状态
      loading: true,
      
      // 设备选择相关
      showDeviceSelector: false,
      devices: [],
      selectedDeviceIds: [],
      isAllSelected: false,
      actionType: '', // 'play' 或 'add'，记录用户点击的是播放还是添加按钮
      currentPattern: null // 当前选中的图案，用于单个图案的操作
    }
  },
  
  onLoad(options) {
    console.log('PlaylistDetail page loaded with options:', options);
    if (!options.id) {
      this.showToastMessage('无效的播放列表ID');
      this.loading = false;
      return;
    }
    // 获取播放列表ID
    this.loadPlaylistData(options.id);
    
    // 加载用户的设备列表
    this.loadDeviceList();
  },
  
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 页面导航
    goHome() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    },
    
    goExplore() {
      uni.switchTab({
        url: '/pages/explore/index'
      })
    },
    
    goProfile() {
      uni.switchTab({
        url: '/pages/profile/index'
      })
    },
    
    // 加载播放列表数据
    loadPlaylistData(playlistId) {
      console.log('Loading playlist data:', playlistId);
      this.loading = true;

      // 从API获取数据
      this.fetchPlaylistFromApi(playlistId);
      
    },
    
    // 从API获取播放列表数据
    fetchPlaylistFromApi(playlistId) {
      console.log('Fetching playlist data from API:', playlistId);
      
        featuredPlaylistApi.getPlaylistDetail(playlistId).then(result => {
          this.loading = false;
          
          if (result.errCode === 0 && result.data) {
            // API返回的数据结构是data.data，所以需要取两层data
            const playlistData = result.data.data || result.data;
            
            // 处理数据
            this.processPlaylistData(playlistData, playlistId);

          } else {
            console.error('获取播放列表详情失败:', result);
            this.showToastMessage('获取播放列表详情失败');
          }
        }).catch(error => {
          this.loading = false;
          console.error('获取播放列表详情失败:', error);
          this.showToastMessage('获取播放列表详情失败');
        });
    },
    
    // 处理播放列表数据
    processPlaylistData(playlistData, playlistId) {
      // 获取播放列表信息和图案列表
      const playlist = playlistData.playlist || {};
      const patterns = playlistData.patterns || [];
      
      this.playlistInfo = {
        id: playlist.id || playlistId,
        name: playlist.title || playlist.title_en || '热门播放列表',
        description: playlist.description || '',
        background: playlist.background || 'linear-gradient(135deg, #8b5cf6, #ec4899)',
        patterns: Array.isArray(patterns) ? patterns.map(pattern => ({
          id: pattern._id,
          name: pattern.pattern_name || pattern.pattern_name_en || '未命名图案',
          duration: pattern.duration ? this.formatPlayTime(pattern.duration) : '3:00',
          image: pattern.preview_image || pattern.pattern_file || '/static/pattern_images/default.svg'
        })) : []
      };
    },
    
    // 格式化播放时长显示
    formatPlayTime(seconds) {
      if (!seconds) return '0:00';
      const mins = Math.floor(seconds / 60);
      const secs = Math.round(seconds % 60);
      return `${mins}:${secs.toString().padStart(2, '0')}`;
    },
    
    // 播放单个图案 - 打开设备选择器
    playPattern(pattern) {
      console.log('Opening device selector for playing pattern:', pattern);
      // 打开设备选择器
      this.openDeviceSelector('play', pattern);
    },
    
    // 添加单个图案到播放列表 - 打开设备选择器
    addToPlaylist(pattern) {
      console.log('Opening device selector for adding pattern to playlist:', pattern);
      // 打开设备选择器
      this.openDeviceSelector('add', pattern);
    },
    
    // 播放全部图案 - 打开设备选择器
    playAllPatterns() {
      if (this.playlistInfo.patterns.length === 0) {
        this.showToastMessage('播放列表为空');
        return;
      }
      
      console.log('Opening device selector for playing all patterns');
      // 打开设备选择器
      this.openDeviceSelector('play');
    },
    
    // 添加全部图案到播放列表 - 打开设备选择器
    addAllToPlaylist() {
      if (this.playlistInfo.patterns.length === 0) {
        this.showToastMessage('播放列表为空');
        return;
      }
      
      console.log('Opening device selector for adding all patterns to playlist');
      // 打开设备选择器
      this.openDeviceSelector('add');
    },
    
    // 分享播放列表
    sharePlaylist() {
      this.showToastMessage('分享功能开发中');
      console.log('Share playlist:', this.playlistInfo);
    },
    
    // 显示Toast提示
    showToastMessage(message) {
      // 清除之前的定时器
      if (this.toastTimeout) {
        clearTimeout(this.toastTimeout);
      }
      
      this.toastMessage = message;
      this.showToast = true;
      
      // 3秒后隐藏
      this.toastTimeout = setTimeout(() => {
        this.showToast = false;
      }, 3000);
    },
    
    // 加载用户的设备列表
    loadDeviceList() {
      deviceApi.getDevices().then(result => {
        if (result && result.errCode === 0 && result.data) {
          this.devices = result.data;
        } else {
          console.error('获取设备列表失败:', result);
        }
      }).catch(error => {
        console.error('获取设备列表失败:', error);
      });
    },
    
    // 打开设备选择器
    openDeviceSelector(actionType, pattern = null) {
      this.actionType = actionType; // 'play' 或 'add'
      this.currentPattern = pattern; // 如果是单个图案操作，保存图案信息
      this.showDeviceSelector = true;
    },
    
    // 关闭设备选择器
    closeDeviceSelector() {
      this.showDeviceSelector = false;
      this.actionType = '';
      this.currentPattern = null;
    },
    
    // 全选/取消全选设备
    toggleSelectAll(e) {
      const isChecked = e.detail.value.length > 0;
      this.isAllSelected = isChecked;
      
      if (isChecked) {
        // 全选
        this.selectedDeviceIds = this.devices.map(device => device._id);
      } else {
        // 取消全选
        this.selectedDeviceIds = [];
      }
    },
    
    // 更新选中的设备
    updateSelectedDevices(e) {
      this.selectedDeviceIds = e.detail.value;
      this.isAllSelected = this.selectedDeviceIds.length === this.devices.length;
    },
    
    // 确认设备选择
    confirmDeviceSelection() {
      if (this.selectedDeviceIds.length === 0) {
        this.showToastMessage('请选择至少一台设备');
        return;
      }
      
      if (this.actionType === 'play') {
        // 播放操作
        if (this.currentPattern) {
          // 播放单个图案
          this.playPatternOnSelectedDevices(this.currentPattern);
        } else {
          // 播放全部图案
          this.playAllPatternsOnSelectedDevices();
        }
      } else if (this.actionType === 'add') {
        // 添加到播放列表操作
        if (this.currentPattern) {
          // 添加单个图案
          this.addPatternToSelectedDevices(this.currentPattern);
        } else {
          // 添加全部图案
          this.addAllPatternsToSelectedDevices();
        }
      }
      
      // 关闭设备选择器
      this.closeDeviceSelector();
    },
    
    // 在选中的设备上播放单个图案
    playPatternOnSelectedDevices(pattern) {
      this.showToastMessage(`正在播放 ${pattern.name}`);
      
      // 遍历选中的设备，将图案添加到每个设备的播放列表并播放
      let successCount = 0;
      const totalDevices = this.selectedDeviceIds.length;
      
      this.selectedDeviceIds.forEach(deviceId => {
        // 使用addToPlaylist API接口添加图案到设备的播放列表
        playlistApi.addToPlaylist({
          deviceId: deviceId,
          patternId: pattern.id,
          position: 'prepend' // 添加到列表开头
        }).then(result => {
          if (result.errCode === 0) {
            // 添加成功后，立即播放
            deviceApi.controlDevice(deviceId, {
              action: 'play',
              patternId: pattern.id
            }).then(playResult => {
              if (playResult.errCode === 0) {
                successCount++;
                if (successCount === totalDevices) {
                  this.showToastMessage(`成功在 ${successCount} 台设备上播放`);
                }
              }
            });
          }
        }).catch(error => {
          console.error(`在设备 ${deviceId} 上播放失败:`, error);
        });
      });
    },
    
    // 在选中的设备上播放全部图案
    playAllPatternsOnSelectedDevices() {
      if (this.playlistInfo.patterns.length === 0) {
        this.showToastMessage('播放列表为空');
        return;
      }
      
      this.showToastMessage('正在添加所有图案到播放列表');
      
      // 收集所有图案ID
      const patternIds = this.playlistInfo.patterns.map(pattern => pattern.id);
      let successCount = 0;
      const totalDevices = this.selectedDeviceIds.length;
      
      this.selectedDeviceIds.forEach(deviceId => {
        // 使用updatePlaylistPatterns API接口批量添加图案
        playlistApi.updatePlaylistPatterns(deviceId, patternIds, 'prepend').then(result => {
          if (result.errCode === 0) {
            // 添加成功后，播放第一个图案
            deviceApi.controlDevice(deviceId, {
              action: 'play',
              patternId: patternIds[0]
            }).then(playResult => {
              if (playResult.errCode === 0) {
                successCount++;
                if (successCount === totalDevices) {
                  this.showToastMessage(`成功在 ${successCount} 台设备上播放全部图案`);
                }
              }
            });
          }
        });
      });
    },
    
    // 将单个图案添加到选中的设备
    addPatternToSelectedDevices(pattern) {
      this.showToastMessage(`正在将 ${pattern.name} 添加到播放列表`);
      
      let successCount = 0;
      const totalDevices = this.selectedDeviceIds.length;
      
      this.selectedDeviceIds.forEach(deviceId => {
        // 使用addToPlaylist API接口添加单个图案
        playlistApi.addToPlaylist({
          deviceId: deviceId,
          patternId: pattern.id,
          position: 'append' // 添加到列表末尾
        }).then(result => {
          if (result.errCode === 0) {
            successCount++;
            if (successCount === totalDevices) {
              this.showToastMessage(`已将 ${pattern.name} 添加到 ${successCount} 台设备的播放列表`);
            }
          }
        }).catch(error => {
          console.error(`添加到设备 ${deviceId} 失败:`, error);
        });
      });
    },
    
    // 将所有图案添加到选中的设备
    addAllPatternsToSelectedDevices() {
      if (this.playlistInfo.patterns.length === 0) {
        this.showToastMessage('播放列表为空');
        return;
      }
      
      this.showToastMessage('正在添加所有图案到播放列表');
      
      // 收集所有图案ID
      const patternIds = this.playlistInfo.patterns.map(pattern => pattern.id);
      let successCount = 0;
      const totalDevices = this.selectedDeviceIds.length;
      
      this.selectedDeviceIds.forEach(deviceId => {
        // 使用updatePlaylistPatterns API接口批量添加图案
        playlistApi.updatePlaylistPatterns(deviceId, patternIds, 'append').then(result => {
          if (result.errCode === 0) {
            successCount++;
            if (successCount === totalDevices) {
              this.showToastMessage(`已将所有图案添加到 ${successCount} 台设备的播放列表`);
            }
          }
        }).catch(error => {
          console.error(`批量添加图案到设备 ${deviceId} 失败:`, error);
        });
      });
    }
  }
}
</script>

<style scoped>
/* Toast动画 */
.toast-animation {
  opacity: 0;
  transform: translate(-50%, -20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* TailwindCSS样式 */
.bg-white { background-color: #ffffff; }
.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-gray-200 { background-color: #e5e7eb; }
.bg-gray-800 { background-color: #1f2937; }
.bg-blue-500 { background-color: #3b82f6; }
.bg-blue-600 { background-color: #2563eb; }

.text-white { color: #ffffff; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #1f2937; }
.text-gray-900 { color: #111827; }
.text-blue-500 { color: #3b82f6; }

.border-b { border-bottom-width: 1px; }
.border-t { border-top-width: 1px; }
.border { border-width: 1px; }
.border-gray-100 { border-color: #f3f4f6; }
.border-gray-200 { border-color: #e5e7eb; }

.h-screen { height: 100vh; }
.h-20 { height: 80px; }
.h-10 { height: 40px; }
.h-16 { height: 64px; }
.h-full { height: 100%; }
.w-10 { width: 40px; }
.w-16 { width: 64px; }
.w-full { width: 100%; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }

.px-4 { padding-left: 16px; padding-right: 16px; }
.px-6 { padding-left: 24px; padding-right: 24px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.pt-12 { padding-top: 48px; }
.pb-4 { padding-bottom: 16px; }

.mr-2 { margin-right: 8px; }
.mr-3 { margin-right: 12px; }
.mr-4 { margin-right: 16px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mt-1 { margin-top: 4px; }

.rounded-lg { border-radius: 8px; }
.rounded-xl { border-radius: 12px; }
.rounded-full { border-radius: 9999px; }

.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.text-xl { font-size: 20px; }
.text-2xl { font-size: 24px; }
.text-sm { font-size: 14px; }
.text-xs { font-size: 12px; }

.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }

.space-x-2 > * + * { margin-left: 8px; }
.space-x-3 > * + * { margin-left: 12px; }
.space-x-4 > * + * { margin-left: 16px; }
.space-y-3 > * + * { margin-top: 12px; }

.transition-colors { transition: color 0.2s ease, background-color 0.2s ease; }

.relative { position: relative; }
.fixed { position: fixed; }
.top-20 { top: 80px; }

.z-50 { z-index: 50; }

.object-cover { object-fit: cover; }

.opacity-90 { opacity: 0.9; }

.transform { transform: var(--tw-transform); }
.-translate-x-1\/2 { --tw-translate-x: -50%; }

.left-1\/2 { left: 50%; }

/* 自定义样式 */
.bg-gradient-to-br {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

.from-purple-500 { --tw-gradient-from: #8b5cf6; }
.to-pink-500 { --tw-gradient-to: #ec4899; }

.play-button:active {
  transform: scale(0.98);
}

.pattern-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pattern-card:active {
  transform: scale(0.98);
}

/* Toast动画 */
.toast-animation {
  animation: fadeInOut 3s ease;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translate(-50%, -20px); }
  10% { opacity: 1; transform: translate(-50%, 0); }
  90% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -20px); }
}

/* 设备选择器样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.modal-content {
  width: 100%;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.modal-header {
  padding: 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: none;
}

.modal-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
}

.modal-close {
  font-size: 44rpx;
  color: #999;
  padding: 0 10rpx;
}

.select-all-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.checkbox-label {
  display: flex;
  align-items: center;
}

.checkbox-text {
  font-size: 30rpx;
  margin-left: 16rpx;
  color: #333;
}

.device-count {
  color: #999;
  font-size: 28rpx;
}

.device-list-container {
  max-height: 60vh;
  overflow-y: auto;
}

.device-item {
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  background-color: #f9f9f9;
  margin: 16rpx 16rpx;
  border-radius: 16rpx;
}

.device-info {
  display: flex;
  align-items: center;
  margin-left: 16rpx;
}

.device-name {
  font-size: 30rpx;
  color: #333;
}

.device-status {
  display: inline-flex;
  margin-left: 10rpx;
}

.device-offline {
  font-size: 24rpx;
  color: #999;
  margin-left: 10rpx;
}

.no-device {
  padding: 60rpx 0;
  text-align: center;
  color: #999;
  font-size: 28rpx;
}

.modal-footer {
  padding: 20rpx 30rpx 40rpx;
  border-top: none;
}

.confirm-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background-color: #4080FF;
  color: white;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: 500;
}

.btn-disabled {
  opacity: 0.5;
}

/* 复选框样式 */
checkbox {
  margin-right: 10rpx;
  transform: scale(1.2);
}

checkbox .wx-checkbox-input {
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  border: 2rpx solid #ddd;
  background-color: transparent;
}

checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  background: #4080FF;
  border-color: #4080FF;
}
</style>
